<template>
	<view>
		<view class="all">
			<view class="content">
				<image src="../../static/ww.png" mode="" class="wenzi"></image>
				<image src="../../static/mt.png" mode="" class="motuo"></image>
				<component-test1></component-test1>
				<view class="chosen">
					<view class="choice-img" @tap="openorder" type="dialog">
						<image src="../../static/mt.png" mode=""></image>
					</view>
					<view class="choice-num">
						<text>16</text>
					</view>
					<view class="choice-price">
						￥32.5
					</view>
					<view class="choice-detail">
						打包带走
					</view>
					<view class="choiced" @click="goConfirmOrder">
						选好了
					</view>
					<view class="other">
						other
					</view>
					
				</view>
				
				<view class="dialog">
					<!-- #ifdef MP-WEIXIN -->
					<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> -->
					<!-- #endif -->
					<uni-popup ref="popup">
						<view class="dialog-box">
							<!-- 头部 -->
							<view class="fade-away">
								<view class="fade-num">
									数量:
								</view>
								<view class="fade-font">
									(16)
								</view>
								<view class="fade-daizi-one">
									口袋1:
								</view>
								<view class="fade-num-one">
									$25.5
								</view>
								<view class="fade-daizi-two">
									口袋1:
								</view>
								<view class="fade-num-two">
									$7
								</view>
							</view>
				
							<view class="dialog-content-top">
								<view>
									<view class="quan" v-if="dianji">
										<image src="../../static/quan.png" mode=""  @click="queding(index)"></image>
										
									</view>
									<view class="quan"  v-else>
										<image src="../../static/isquan.png" mode="" @click="quedingtwo(index)"></image>
									</view>
								</view>
								<view class="dialog-wenzi">
									口袋1
								</view>
								<text>(10)</text>
								<view class="dabao">
									打包费
									<text>￥1</text>
								</view>
								<view class="delAll">
									清空这口袋
								</view>
				
							</view>
							<scroll-view scroll-y="true" class="dialog-height">
								<view class="nei-rong">
									
									<view v-for="(item, index) in csListArrl" :key="index" :data-index="index" class="order-item"
										@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'">
										<view class="content">
											<view class="rong-pic">
												<image src="../../static/Frame 25.png" mode=""></image>
											</view>
											<view class="jizhua">
												<text>香炉鸡爪</text>
											</view>
											<view class="fuhao">
												￥
											</view>
											<view class="money">
												2.7
											</view>
											<view class="danjia">
												30g/份
											</view>
											
											
											<view class="jiasuan">
												<view class="add" @tap="add(index)"></view>
												<text class="num">{{item.num}}</text>
												<view class="sub" @click="sub(index)"></view>
											</view>
										</view>
										<view class="remove" @click="delData(item)">删 除</view>
										
									</view>
									
									
									
								</view>
							</scroll-view>
							
				
							<!-- //底部选好了 -->
							<view class="chosen" @click="close">
								<view class="choice-img">
									<image src="../../static/xianxinmotuo.png" mode=""></image>
								</view>
								<view class="choice-num">
									<text>16</text>
								</view>
								<view class="choice-price">
									￥32.5
								</view>
								<view class="choice-detail">
									打包带走
								</view>
								<view class="choiced" @click="goConfirmOrder">
									选好了
								</view>
								<view class="other">
									other
								</view>
				
							</view>
						</view>
					</uni-popup>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import ComponentTest1 from '@/components/ComponentTest1.vue'
	export default {
		components:{
			ComponentTest1
		},	
		data() {
			return {
				dianji:true,
				//滑动
				csListArrl: [{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					},
					{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					},{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					},{
						jia: true,
						right: 0,
						left: 0,
						num: 0
					}
				],
				//左滑默认宽度
				delBtnWidth: 122,
			};
		},
		methods: {
			//去确认订单
			goConfirmOrder(){
				
				uni.navigateTo({
					url:"/pages/ConfirmOrder/ConfirmOrder"
				})
			},
			// 加号
			addPic(index) {
				this.csListArrl[index].jia = false
				this.csListArrl[index].num++;
			},
			add(index) {
				this.csListArrl[index].num++;
			},
			sub(index) {
				if (this.csListArrl[index].num !== 0) {
					this.csListArrl[index].num--;
					if (this.csListArrl[index].num == 0) {
						this.csListArrl[index].jia = true
					}
			
				}
			},
			//确定
			queding(index){
				console.log(222);
				this.dianji = false
			},
			quedingtwo(index){
				this.dianji = true
			},
			//弹窗
			openorder() {
				this.$refs.popup.open("bottom");
		
			},
			close() {
				this.$refs.popup.close()
		
			},
			
			//左右滑动
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				console.log(e);
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);
			
				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				// console.log(disX);
				if (disX >= 40) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				}  else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束");
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.all {
		width: 100%;
		background: #FA8C16;
	}

	.content {
		width: 100%;
		background: #FFFFFF;
		border-radius: 24px 24px 0px 0px;

		.wenzi {
			width: 576rpx;
			height: 72rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
		}

		.motuo {
			width: 88rpx;
			height: 88rpx;
			margin-left: 32rpx;
		}
		// 底部选好了
		
			.chosen{
				position: fixed;
				margin-left: 50%;
				transform: translateX(-50%);
				bottom: 50rpx;
				width: 686rpx;
				height: 116rpx;
				background: #FA8C16;
				border-radius: 88rpx;
				.choice-img{
					width: 88rpx;
					height: 88rpx;
					margin-top: 10rpx;
					margin-left: 20rpx;
					image{
						width: 88rpx;
						height: 88rpx;
						background-size: 100%;
					}
				}
				.choice-num{
					width: 32rpx;
					height: 32rpx;
					background-color: #000000;
					border-radius: 50%;
					margin-top: -80rpx;
					margin-left: 95rpx;
					text{
						display: block;
						width: 32rpx;
						height: 32rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 20rpx;
						line-height: 32rpx;
						color: #FFFFFF;
					}
				}
				.choice-price{
					// width: 38px;
					height: 36rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					margin-top: -30rpx;
					margin-left: 130rpx;
				}
				.choice-detail{
					// width: 40px;
					height: 20rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
					margin-left: 135rpx;
		
				}
				.choiced{
					width: 96rpx;
					height: 32rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 32rpx;
					color: #FFFFFF;
					margin-top: -60rpx;
					margin-left: 550rpx;
				}
				.other{
					width: 54rpx;
					height: 20rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
					margin-left: 560rpx;
				}
				
			}
	}
.dialog-box {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 0px 0px;
		position: relative;





		//逐渐变没
		.fade-away {
			position: fixed;
			margin-left: 50%;
			transform: translateX(-50%);
			top: 40rpx;
			width: 686rpx;
			height: 56rpx;
			background: #FCD198;
			opacity: 0.9;
			border-radius: 82rpx;
			display: flex;

			.fade-num {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 30rpx;
			}

			.fade-font {
				width: 50rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-daizi-one {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-daizi-two {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-num-one {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}

			.fade-num-two {
				width: 80rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #121B36;
				margin-top: 18rpx;
				margin-left: 10rpx;
			}
		}
			


		//内容
		.dialog-height{
			padding-top: 100rpx;
			width: 750rpx;
			height: 900rpx;
		
		.nei-rong{
			position: absolute;
			width: 100%;
			height: 100%;
			// background-color: rosybrown;
			margin-top: 200rpx;
			//移动
			
			.order-item {
				width: 100%;
				border-radius: 0rpx 0rpx 0px 0px;
				display: flex;
				position: relative;
				margin:  auto;
				align-items: right;
				flex-direction: row;
			}
			
			.content {
				border-radius: 0rpx 0rpx 0px 0px;
				width: 100%;
				height: 172rpx;
				margin: 0 auto;
				border: 0.1rpx solid #C0C0C0;
				display: flex;
				.rong-pic{
					width: 140rpx;
					height: 140rpx;
					margin-left: 40rpx;
					margin-top: 32rpx;
					image{
						width: 140rpx;
						height: 140rpx;
						background-size: 100%;
					}
					
				}
				.jizhua {
					width: 112rpx;
					height: 28rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 1000;
					font-size: 28rpx;
					line-height: 28rpx;
					color: #000000;
					margin-top: 32rpx;
					margin-left: 40rpx;
				}
				
				.fuhao{
					width: 17rpx;
					height: 22rpx;
					color: #FA8C16;
					font-size: 28rpx;
					line-height: 22rpx;
					margin-top: 70rpx;
					margin-left: -115rpx;
				}
				.money{
					width: 58rpx;
					height: 40rpx;
					font-style: normal;
					font-weight: 500;
					font-size: 40rpx;
					line-height: 40rpx;
					color: #FA8C16;
					margin-top: 70rpx;
					margin-left: 20rpx;
				}
				.danjia{
					width: 66rpx;
					height: 20rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #BFBFBF;
					margin-top: 38rpx;
					margin-left: 40rpx;
				}
				// .add-pic {
				// 	width: 70rpx;
				// 	height: 70rpx;
				// 	background-image: url("@/static/Frame (7).png");
				// 	position: absolute;
				// 	top: 100rpx;
				// 	left: 580rpx;
				// }
				
				.jiasuan {
					display: flex;
					width: 190rpx;
					height: 50rpx;
					// border: 1px solid #D9D9D9;
					border-radius: 35px;
					margin-top: 60rpx;
					margin-left: 100rpx;
					
				
				}
				
				.add {
					margin-left: 20rpx;
					margin-top: 3rpx;
					width: 48rpx;
					height: 48rpx;
					background-image: url("@/static/Frame (8).png");
					background-size: 100%;
					
				
				}
				
				.num {
					
					width: 22rpx;
					height: 36rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FA8C16;
					margin-top: 6rpx;
					margin-left: 20rpx;
					
					
				}
				
				.sub {
				
					width: 48rpx;
					height: 48rpx;
					background-image: url("@/static/Frame (9).png");
					background-size: 100%;
					margin-top: 3rpx;
					margin-left: 20rpx;
					
				}
				
				
			}
			
			.remove {
				
				width: 244rpx;
				height: 100%;
				background-color: #0862B5;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				right: -244rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
			}
			

			
			
			
			
		}
		}
		
		
		
//情况口袋
		.dialog-content-top{
			z-index: 50;
			position: absolute;
			height: 32rpx;
			width: 100%;
			margin-top: 130rpx;
			display: flex;
			.quan{
				width: 62rpx;
				height: 32rpx;
				margin-left: 50rpx;
				margin-top: -10rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					background-size: 100%;
				}
			}
			.dialog-wenzi{
				width: 39px;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
			}
			text{
				width: 20rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
			}
			.dabao{
				width: 150rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 800;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #121B36;
				margin-left: 50rpx;
				text{
					color: #FA8C16;
				}
			}
			.delAll{
				width: 120rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 32rpx;
				margin-left: 200rpx;
				color: #BFBFBF;

			}
		}



		// 底部选好了

		.chosen {
			position: fixed;
			margin-left: 50%;
			transform: translateX(-50%);
			bottom: 50rpx;
			width: 686rpx;
			height: 116rpx;
			background: #FA8C16;
			border-radius: 88rpx;

			.choice-img {
				width: 88rpx;
				height: 88rpx;
				margin-top: 10rpx;
				margin-left: 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					background-size: 100%;
				}
			}

			.choice-num {
				width: 32rpx;
				height: 32rpx;
				background-color: #000000;
				border-radius: 50%;
				margin-top: -80rpx;
				margin-left: 95rpx;

				text {
					display: block;
					width: 32rpx;
					height: 32rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 32rpx;
					color: #FFFFFF;
				}
			}

			.choice-price {
				// width: 38px;
				height: 36rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 36rpx;
				color: #FFFFFF;
				margin-top: -30rpx;
				margin-left: 130rpx;
			}

			.choice-detail {
				// width: 40px;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 135rpx;

			}

			.choiced {
				width: 96rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #FFFFFF;
				margin-top: -60rpx;
				margin-left: 550rpx;
			}

			.other {
				width: 54rpx;
				height: 20rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20rpx;
				line-height: 20rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
				margin-left: 560rpx;
			}

		}
	}
</style>

